<!--
 * @Author: 孙文豪
 * @Description: 新增商品名称弹窗
 * @Date: 2024-03-25 15:02:04
 * @LastEditTime: 2024-03-28 15:25:43
 * @LastEditors: 孙文豪
-->
<template>
  <swh-drag-box
    :title="isEdit ? '编辑商品' : '新增商品'"
    :zIndex="99"
    :top="'200px'"
    :isMask="true"
    :isPadding="false"
    @closePortability="close"
    @confirmDarg="confirmBox"
  >
    <div class="commodity-add">
      <div class="personal-info">
        <div class="input-box">
          <span class="text">商品名称：</span>
          <input
            class="jxc-input"
            :class="{ required: requiredlist.includes('commodityName') }"
            type="text"
            maxlength="20"
            placeholder="请输入商品名称"
            v-model.trim="commodityName"
          />
        </div>
        <div class="input-box">
          <span class="text">商品编码：</span>
          <input
            class="jxc-input"
            :class="{ required: requiredlist.includes('commodityCode') }"
            type="text"
            maxlength="20"
            placeholder="请输入商品编码"
            v-model.trim="commodityCode"
          />
        </div>
        <div class="input-box">
          <span class="text">商品查询码：</span>
          <input
            class="jxc-input"
            :class="{ required: requiredlist.includes('commodityQueryCode') }"
            type="text"
            maxlength="20"
            placeholder="请输入商品查询码"
            v-model.trim="commodityQueryCode"
          />
        </div>
        <div class="input-box">
          <span class="text">当前库存：</span>
          <input
            class="jxc-input"
            :class="{ required: requiredlist.includes('inventoryNumber') }"
            type="number"
            min="0"
            maxlength="11"
            placeholder="请输入商品库存"
            @blur="formatInput('inventoryNumber')"
            v-model="inventoryNumber"
          />
        </div>
        <div class="input-box">
          <span class="text">进货价：</span>
          <input
            class="jxc-input"
            type="text"
            :class="{ required: requiredlist.includes('buyingPrice') }"
            maxlength="11"
            placeholder="请输入商品进货价"
            @blur="formatInput('buyingPrice')"
            v-model="buyingPrice"
          />
        </div>
        <div class="input-box">
          <span class="text">零售价：</span>
          <input
            class="jxc-input"
            type="text"
            maxlength="11"
            placeholder="请输入商品零售价"
            :class="{ required: requiredlist.includes('retailPrice') }"
            @blur="formatInput('retailPrice')"
            v-model="retailPrice"
          />
        </div>
        <div class="input-box">
          <span class="text">进货提醒数量：</span>
          <input
            class="jxc-input"
            :class="{ required: requiredlist.includes('reminderCount') }"
            type="number"
            min="0"
            maxlength="11"
            placeholder="请输入商品进货提醒数量"
            @blur="formatInput('reminderCount')"
            v-model="reminderCount"
          />
        </div>
        <div class="input-box">
          <span class="text">描述：</span>
          <textarea
            maxlength="100"
            v-model.trim="commodityContent"
            class="jxc-input-text"
            placeholder="商品描述（上限100字符）"
          ></textarea>
        </div>

        <!-- <div class="input-box">
          <span class="text">图片：</span>
          <input
            class="jxc-input"
            type="text"
            maxlength="10"
            placeholder="请输入商品零售价"
            v-model="imgName"
          />
        </div>
        <div class="input-box">
          <img class="commodity-img" :src="getImageUrl(imgName)" alt="" />
        </div> -->
      </div>
    </div>
  </swh-drag-box>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import {  integer } from '@/utils/common.js';
import { commodityListInfo } from './commodity.js';
export default {
  name: '',
  props: {
    editCommodity: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  setup(props, ctx) {
    const commodity = reactive({ commodityListInfo, requiredlist: [],isEdit:false });
    const data = reactive({
      commodityId: '', //商品id  存在时编辑，不存在是新增
      commodityName: '', //商品名称
      commodityCode: '', //商品名称
      commodityQueryCode: '', //商品查询码
      buyingPrice: '', //进货价
      retailPrice: '', //零售价
      inventoryNumber: 0, //库存数量
      reminderCount:0,
      commodityContent: '' //描述
      // imgName: ''
    });
    onBeforeMount(() => {});
    onMounted(() => {
      if (JSON.stringify(props.editCommodity) !== '{}') {
        Object.assign(data, props.editCommodity);
      }
      // 判断是新增还是编辑
      commodity.isEdit = Boolean(data.commodityId)
      // 获取必填的字段数组
      commodity.commodityListInfo.forEach((item) => {
        if (item.required) {
          commodity.requiredlist.push(item.dataIndex);
        }
      });
    });
    // 动态拼接图片url地址获取图片
    // const getImageUrl = (name) => {
    //   return new URL(`/public/commodity/${name}`, import.meta.url).href
    // };
    // 转金额格式
    const formatInput = (str) => {
      if (str == 'inventoryNumber' || str == 'reminderCount' ) {
        data[str] = integer(data[str]);
      } 
    };
    const close = () => {
      ctx.emit('close');
    };
    // 点击确认增加或者编辑
    const confirmBox = () => {
      let bool = true; //控制必填验证
      try {
        commodity.commodityListInfo.forEach((item) => {
          if (item.required) {
            if (!data[item.dataIndex]) {
              // 这里没有内容
              throw new Error(item.name);
            }
          }
        });
      } catch (name) {
        // 错误类型：e.name;
        // 错误代码：e.number&0xffff;
        // 错误信息：e.message;
        // 错误描述：e.description;
        // console.log(name);
        bool = false;
        Message({
          type: 'warning',
          content: `请输入${name.message}`
        });
      }

      if (!bool) return;
      // 新增时，增加id
      if (!data.commodityId) {
        // 新增 增加id
        data.commodityId = `commodity_${Date.now().toString(16)}`;
      }
      // 判断进货和零售价格是否合理
      if (parseFloat(data.retailPrice )< parseFloat(data.buyingPrice )) {
        Message({
          type: 'warning',
          content: `零售价不可少于进货价`
        });
        return;
      }
      ctx.emit('confirmBox', data);
      close();
    };
    return {
      // getImageUrl,
      confirmBox,
      close,
      formatInput,
      ...toRefs(data),
      ...toRefs(commodity)
    };
  }
};
</script>
<style scoped lang="less">
.commodity-add {
  width: 700px;
  .personal-info {
    width: 100%;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    .input-box {
      overflow: hidden;
      float: left;
      margin-right: 30px;
      margin-bottom: 20px;
      position: relative;
      .text {
        float: left;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: @HSB;
        width: 100px;
      }
      .jxc-input {
        float: left;
        width: 200px;
        height: 32px;
        padding: 0 10px;
        border-radius: 4px;
        box-sizing: border-box;
        background: #fff;
        line-height: 32px;
        outline: none;
        border: 1px solid @HSD;
        &.required {
          &::-webkit-input-placeholder {
            color: @CS;
          }
        }
        &:focus {
          border: 1px solid @TSA;
        }
        &::-webkit-input-placeholder {
          color: @HSD;
        }
      }
      .commodity-img {
        width: 200px;
      }
      .jxc-input-text {
        float: left;
        width: 530px;
        height: 82px;
        padding: 0 10px;
        border-radius: 4px;
        box-sizing: border-box;
        background: #fff;
        line-height: 32px;
        outline: none;
        border: 1px solid @HSD;
        resize: none;
        &::-webkit-input-placeholder {
          font-size: 14px;
          font-family: 'serif';
        }
        &::-webkit-scrollbar {
          width: 3px;
        }
      }
    }
  }
}
</style>
